<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="logo"></div>
        <div class="operation">
          <el-dropdown trigger="click">
            <img class="avater" src="../../assets/imgs/tx.jpg" alt="" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="HomeFilled">主页</el-dropdown-item>
                <el-dropdown-item :icon="CloseBold"> 注销 </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
            :collapse-transition="false"
          >
            <menu-item
              v-for="menu in menuList"
              :key="menu.id"
              :menu="menu"
            ></menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view>

          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { getTree } from "@/api/menu";
import {
  HomeFilled,
  CloseBold,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import MenuItem from "../../components/Menuitem.vue";

onMounted(() => {
  getMenuList();
});

const menuList = ref([]);
async function getMenuList() {
  const result = await getTree();
  //需要一个对象接收返回的数据
  if (result.code == 200 && result.success) {
    menuList.value = result.data.menuTree;
  }
  console.log(menuList.value);
}
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #545c64;;
  display: flex;
  justify-content: space-between;
}

.el-aside {
  height: calc(100vh - 60px);
  background-color: #545c64;
}

.el-main {
  width: 100%;
  height: calc(100vh - 60px);
  background-color: #eef0ee;
}

.logo {
  height: 60px;
  width: 300px;
  background: url(../../assets/imgs/logo.jpeg) 0 0 no-repeat;
  background-size: contain;
}

.operation {
  height: 60px;
  width: 180px;
}

.avater {
  height: 60px;
  width: auto;
  border-radius: 50%;
}

.el-menu{
  border: 0;
}
</style>